<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      ok-text="确认添加"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="40%">
      <div style="margin-left: 200px">
        <Row style="margin-bottom: 15px">
          <Col span='7'>姓名：</Col>
          <Col span='8'>{{row.uname}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>新预约时间：</Col>
          <Col span='8'>{{confirmData.appointime}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>接待销售：</Col>
          <Col span='8'>{{nameList.filter(item => item.id.toString() === confirmData.puid)[0] ? nameList.filter(item => item.id.toString() === confirmData.puid)[0].uname : '-'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>备注：</Col>
          <Col span='8'>{{confirmData.remarks}}</Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'AppointConfirmModal',
  props: {
    confirmData: {},
    row: null
  },
  data () {
    return {
      title: '',
      loading: true
    }
  },
  updated () {
    this.title = '确认预约时间'
  },
  computed: {
    ...mapState({
      modalState: state => state.modal.appointConfirmState,
      nameList: state => state.arrive.nameList
    })
  },
  methods: {
    ...mapActions(['updateAppointConfirmState', 'updateAppointDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('appoint-confirm-valid')
    },
    cancel () {
      this.updateAppointConfirmState(false)
      this.updateAppointDrawerState(true)
    }
  }
}
</script>
